<template>
	<view>
		<view class="user-section">
			<image class="bg" src="/static/images/user-bg.jpg"></image>
			<text class="bg-upload-btn" v-if="userInfo.leadermobile">
				推荐人：[ {{ userInfo.leadermobile }} ]
			</text>
			<view class="portrait-box" @click="chooseImage">
				<image class="portrait" :src="userInfo.headimg || '/static/logo.png'"></image>
				<text class="pt-upload-btn yticon icon-paizhao">选择图像</text>
			</view>
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input
				type="text"
				:value="userInfo.mobile"
				placeholder="请输入手机号"
				placeholder-class="input-empty"
				maxlength="20"
				data-key="mobile"
				style="height:32px"
				disabled="disabled"
			/>
		</view>
		<view class="row b-b">
			<text class="tit">昵称</text>
			<input
				type="text"
				:value="userInfo.nickname"
				placeholder="请输入昵称"
				placeholder-class="input-empty"
				maxlength="20"
				data-key="nickname"
				@input="inputChange"
				style="height:32px"
			/>
		</view>
		<view class="row b-b">
			<text class="tit">QQ</text>
			<input
				type="text"
				:value="userInfo.qq"
				placeholder="请输入qq"
				placeholder-class="input-empty"
				maxlength="20"
				data-key="qq"
				@input="inputChange"
				style="height:32px"
			/>
		</view>
		<view class="row b-b">
			<text class="tit">邮箱</text>
			<input
				type="text"
				:value="userInfo.email"
				placeholder="请输入邮箱"
				placeholder-class="input-empty"
				maxlength="20"
				data-key="email"
				@input="inputChange"
				style="height:32px"
			/>
		</view>
		
		<view class="submit-con">
			<button class="submit-btn" @click="toSubmit" :disabled="submiting">提交修改</button>
		</view>
	</view>
</template>

<script>
import { serveraddress } from '@/utils/serverUrl';

export default {
	data() {
		return {
			token: '',
			imageList: [],
			
			userInfo: {},
			nickname: '',
			qq: '',
			email: '',
			
			submiting: false
		};
	},
	onLoad() {
		
	},
	onShow() {
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo({
				url: '/pages/public/login'
			});
			return;
		}
		
		//获取用户信息
		this.getmedate();
	},
	methods: {
		//复制input的值
		inputChange(e) {
			const key = e.currentTarget.dataset.key;
			this[key] = e.detail.value;
		},

		//获取用户信息
		async getmedate() {
			const param_userinfo = {
				token: this.token
			};
			await this.$http.request('User', 'userinfo', 'GET', param_userinfo, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.userInfo = res.data.data;
						this.nickname = res.data.data.nickname;
						this.qq = res.data.data.qq;
						this.email = res.data.data.email;
					}
				}
			});
		},

		//选择图片
		chooseImage: function() {
			uni.chooseImage({
				count: 1, //默认1
				sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有
				success: res => {
					const images = res.tempFilePaths;
					this.uploadFiles(images);
				}
			});
		},
		//上传图片
		async uploadFiles(images) {
			this.imageList.push({
				filePath: images[0],
				progress: 0
			});
			uni.showLoading({
				title: '请稍后..',
				mask: true
			});

			let uploadUrl = '';
			try {
				uploadUrl = await this.uploadImage(images[0]);
			} catch (err) {
				console.log(err);
				return;
			}

			if (uploadUrl) {
				this.imageList[this.imageList.length - 1].src = uploadUrl;
				this.userInfo.headimg = uploadUrl;
				uni.hideLoading();
			} else {
				//上传失败处理
				this.imageList.pop();
				uni.hideLoading();
				uni.showToast({
					title: '上传中出现问题，已终止上传',
					icon: 'none',
					mask: true,
					duration: 2000
				});
			}
		},
		uploadImage: function(file) {
			return new Promise((resolve, reject) => {
				//发送给后端的附加参数
				const formData = {
					token: this.token
				};
				this.uploadTask = uni.uploadFile({
					url: serveraddress + '/User/headimgedit',
					filePath: file,
					name: 'file',
					formData: formData,
					success(uploadFileResult) {
						console.log(uploadFileResult);
						const uploadFileRes = JSON.parse(uploadFileResult.data) || {};
						if (uploadFileRes.error === 0 && uploadFileRes.data) {
							console.log(uploadFileRes.data);
							resolve(uploadFileRes.data);
						} else {
							reject('接口返回错误');
						}
					},
					fail() {
						reject('网络链接错误');
					}
				});
				//上传进度
				this.uploadTask.onProgressUpdate(progressRes => {
					this.imageList[this.imageList.length - 1].progress = progressRes.progress;
				});
			});
		},

		//提交修改
		toSubmit() {
			this.submiting = true;
			const { nickname,jysid,sex,birthday,qq,email } = this;

			/* 数据验证模块*/
			
			if (!nickname) {
				this.$helper.toast('昵称不能为空', '', '/static/toast/fail-circle.png');
				this.submiting = false;
				return;
			}

			const param = {
				token: this.token,
				nickname: nickname,
				sex: sex,
				birthday: birthday,
				qq: qq,
				email: email
			};
			this.$http.request('User', 'userinfoedit', 'POST', param, res => {
				this.submiting = false;
				if (res.status == 1) {
					if (res.data.error == 0) {
						// 认证成功
						this.$helper.toast('资料修改成功', 'sucess');
						//返回前一页
						setTimeout(() => {
							uni.navigateBack(1);
						}, 500);
					}
				}
			});
		}

	}
};
</script>

<style lang="scss">
.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 150upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
}

.user-section {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 260upx;
	padding: 40upx 30upx 0;
	position: relative;
	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		filter: blur(1px);
		opacity: 0.7;
	}
	
	.portrait-box {
		width: 200upx;
		height: 200upx;
		border: 6upx solid #fff;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 40upx;
		z-index: 2;
		
		.portrait {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.yticon {
			position: absolute;
			left: 0upx;
			top: 80upx;
			line-height: 1;
			z-index: 5;
			font-size: 30upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0, 0, 0, 0.4);
		}
		
	}
	
	.pt-upload-btn {
		width: 190upx;
		left: 100;
		top: 80upx;
		text-align: center;
	}
	
	.bg-upload-btn {
		width: 100%;
		text-align: center;
		line-height: 60upx;
		color: #000;
		font-size: 30upx;
		left: 0upx;
		bottom: 16upx;
	}
}

/* submit-con */
.submit-con {
	margin-top: 20upx;

	.submit-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

	.getinfo-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 80upx;
		margin-top: 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $uni-color-success;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
}
</style>
